'use strict';
import React from "react";
import {View, StyleSheet, Text} from "react-native";
import Container from "../../component/common/Container";
import NavigationBar from "../../component/navigation/NavigationBar";
import ListView from "../../component/list/ListView";

class PointDetail extends React.Component {

    constructor(props) {
        super(props);
        this.page = 1;
        this.state = {data:[]};
    }

    componentDidMount(){
        this.requestDataSource();
    }

    requestDataSource = async () => {
        const limit = 10;
        const data = {
            page: this.page,
            limit,
            create_user: global.secretKey,
        };
        const result = await Services.post(ServicesApi.POINT_DETAIL, data);
        // console.log('积分明细返回----------->', result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            if (data.page === 1) {
                this.setState({data: result.data})
            } else {
                if (result.data.length !== 0) {
                    let temp = this.state.data.slice();
                    this.setState({data: temp.concat(result.data)});
                }
            }
        } else {
            ToastManager.show(result.dec || 'error');
        }
        this.sectionList && this.sectionList.stopRefresh();
        this.sectionList && this.sectionList.stopEndReached({allLoad: result.data.length < limit})
    };

    _renderItem = (info) => {
        const {item, index} = info;
        //根据类型不同做不一样的标题拼接
        const title = item.integral_type === 'goods' ? `兑换“${item.integral_content}”` : `任务-${item.integral_content}`;
        const point = item.integral_type === 'goods' ? `-${item.integral_count}积分` : `+${item.integral_count}积分`;
        const pointColor = item.integral_type === 'goods' ? '#3c3c3c' : '#ff9e40';
        const time = Moment(item.create_time).format('YYYY-MM-DD');
        return (
            <View style={styles.itemView}>
                <View style={styles.itemTopView}>
                    <Text style={styles.itemTitle}>{title}</Text>
                    <Text style={[styles.itemCount,{color: pointColor}]}>{point}</Text>
                </View>
                <Text style={styles.itemTime}>{time}</Text>
            </View>
        )
    };

    //获取lv对象
    _captureRef = (v) => {
        this.sectionList = v;
    };

    _keyExtractor = (item, index) => {
        return `item_${index}`
    };

    _onRefresh = (stopRefresh) => {
        this.page = 1;
        this.requestDataSource()
    };

    _onEndReached = (stopEndReached) => {
        this.page++;
        this.requestDataSource()
    };
    renderItemSeparator = (info) => {
        return (
            <View style={styles.itemSep} />
        )
    };
    render() {
        const {params} = this.props.navigation.state;
        const pageTitle = params.pageTitle || '积分明细';
        return (
            <Container>
                <NavigationBar
                    title={pageTitle}
                />
                <ListView
                    style={styles.lv}
                    data={this.state.data}
                    ref={this._captureRef}
                    initialRefresh={false}
                    enableLoadMore={true}
                    enableRefresh={true}
                    keyExtractor={this._keyExtractor}
                    renderItem={this._renderItem}
                    onRefresh={this._onRefresh}
                    onEndReached={this._onEndReached}
                    ItemSeparatorComponent={this.renderItemSeparator}
                />
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    lv: {

    },

    itemView: {
        paddingHorizontal: 15,
        paddingVertical: 10,
    },
    itemTopView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    itemTitle: {
        fontSize: FontSize(14),
        color: "#333"
    },
    itemCount: {
        fontSize: FontSize(14),
        color: "#3c3c3c"
    },
    itemTime: {
        fontSize: FontSize(14),
        color: "#878787",
        marginTop: 7,
    },
    itemSep: {
        height: 1,
        backgroundColor: '#f7f7f7',
    },
});

export default PointDetail